﻿@page "/tree-grid/keyboard-interaction"

@using Syncfusion.Blazor.TreeGrid
@using Syncfusion.Blazor.Grids

@*Hidden:Lines*@
@using BlazorDemos
@using ej2_blazor_selfdata
@inherits SampleBaseComponent;
@*End:Hidden*@

<SampleDescription>
    <p> This demo showcases the keyboard shortcuts applicable on Tree Grid and also lists out in below description, how those applicable shortcuts interacts with Tree Grid actions.</p>
</SampleDescription>
<ActionDescription>
  <p> All the Tree Grid actions can be controlled via keyboard keys. The applicable key combinations and its relative functionalities are listed below. </p><p>
     <table>
        <tr><td><b>Keys</b></td><td><b>Description</b></td></tr>
        <tr><td><code>Ctrl + Down Arrow</code></td><td>ExpandAll</td></tr>
        <tr><td><code>Ctrl + Up Arrow</code></td><td>CollapseAll</td></tr>
        <tr><td><code>F2</code></td><td>Edit</td></tr>
        <tr><td><code>ESC</code></td><td>Cancel</td></tr>
        <tr><td><code>Enter</code></td><td>Save</td></tr>
        <tr><td><code>Insert</code></td><td>Add</td></tr>
        <tr><td><code>Delete</code></td><td>Delete</td></tr>
        <tr><td><code>Ctrl + Home</code></td><td>First row selection</td></tr>
        <tr><td><code>Ctrl + End</code></td><td>Last row selection</td></tr>
        <tr><td><code>Home</code></td><td>First cell selection</td></tr>
        <tr><td><code>End</code></td><td>Last cell selection</td></tr>
        <tr><td><code>Up Arrow</code></td><td>Move row selection up</td></tr>
        <tr><td><code>Down Arrow</code></td><td>Move row selection down</td></tr>
        <tr><td><code>Up Arrow</code></td><td>Move Cell selection up</td></tr>
        <tr><td><code>Down Arrow</code></td><td>Move Cell selection down</td></tr>
        <tr><td><code>Right Arrow</code></td><td>Move Cell selection right</td></tr>
        <tr><td><code>Left Arrow</code></td><td>Move Cell selection left</td></tr>
        <tr><td><code>Shift + Down/Up</code></td><td>Multiple row Selection</td></tr>
        <tr><td ><code>Shift + Right/Left/Down/Up</code></td><td>Multiple Cell Selection</td></tr>
        <tr><td><code>Ctrl + Shift + Up Arrow</code></td><td>Collapse selected parent row</td></tr>
        <tr><td><code>Ctrl + Shift + Down Arrow</code></td><td>Expand selected parent row</td></tr>
        <tr><td><code>Ctrl + j</code></td><td>Focus Tree Grid element</td></tr>
        <tr><td><code>Tab</code></td><td>Go to next cell for editing</td></tr>
        <tr><td><code>Shift + Tab</code></td><td>Go to previous cell for editing</td></tr>
        <tr><td><code>PageDown</code></td><td>Go to Next page</td></tr>
        <tr><td><code>PageUp</code></td><td>Go to Previous page</td></tr>
        <tr><td><code>Ctrl + Alt + PageUp</code></td><td>Go to First page</td></tr>
        <tr><td><code>Ctrl + Alt + PageDown</code></td><td>Go to Last page</td></tr>
        <tr><td><code>Alt + PageUp</code></td><td>Go to Next pager</td></tr>
        <tr><td><code>Alt + PageDown</code></td><td>Go to last pager</td></tr>
        </table>
    </p>
    <p> More information can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/treegrid/accessibility/?no-cache=1' >documentation </a> section.</p> 
</ActionDescription>


<div class="col-lg-8 control-section">
    <div class="content-wrapper">
        <div class="row">
              <SfTreeGrid DataSource="@TreeData" IdMapping="TaskID" ParentIdMapping="ParentID" AllowPaging="true" Height="400" TreeColumnIndex="1" AllowSelection="true">
                <TreeGridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Multiple" Mode="Syncfusion.Blazor.Grids.SelectionMode.Row"></TreeGridSelectionSettings>
                <TreeGridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="Syncfusion.Blazor.TreeGrid.EditMode.Row"></TreeGridEditSettings>
                <TreeGridPageSettings PageSize="2"></TreeGridPageSettings>
                <TreeGridColumns>
                    <TreeGridColumn Field="TaskID" HeaderText="Task ID" Width="80" ValidationRules="@(new ValidationRules() { Required = true, Number = true })" IsPrimaryKey="true" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
                    <TreeGridColumn Field="TaskName" HeaderText="Task Name" ValidationRules="@(new ValidationRules() { Required = true })" Width="165"></TreeGridColumn>
                    <TreeGridColumn Field="StartDate" HeaderText="Start Date" Format="d" Type=Syncfusion.Blazor.Grids.ColumnType.Date Width="100" ValidationRules="@(new ValidationRules() { Required = true })" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" EditType=Syncfusion.Blazor.Grids.EditType.DatePickerEdit></TreeGridColumn>
                    <TreeGridColumn Field="Duration" HeaderText="Duration" Width="100" ValidationRules="@(new ValidationRules() { Number = true, Min = 0 })" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right"></TreeGridColumn>
                </TreeGridColumns>
            </SfTreeGrid>
        </div>
    </div>
</div>
<div class="col-lg-3 property-section">
    <div class="property-panel-header">Properties</div>
    <table id="property" title="Properties" style="width: 156%; height: 100%;">
        <tr style="height: 50px">
            <td style="width: 30%">
                <b>Keys</b>
            </td>
            <td style="width: 70%;padding-right: 10px">
                <b>Description</b>
            </td>
        </tr>
        <tr style="height:50px;">
            <td style="width: 50%">
                <b>F2</b>
            </td>
            <td style="width: 50%">
                Cell edit
            </td>
        </tr>
        <tr style="height:50px;">
            <td style="width: 50%">
                <b>Enter</b>
            </td>
            <td style="width: 50%">
                Save request
            </td>
        </tr>
        <tr style="height:50px;">
            <td style="width: 50%">
                <b>Delete</b>
            </td>
            <td style="width: 50%">
                Delete row
            </td>
        </tr>
        <tr style="height:50px;">
            <td style="width: 50%">
                <b>Ctrl + Shift + UpArrow</b>
            </td>
            <td style="width: 50%">
                Collapse Child Grid
            </td>
        </tr>
        <tr style="height:50px;">
            <td style="width: 50%">
                <b>Ctrl + Shift + DownArrow</b>
            </td>
            <td style="width: 50%">
                Expand Child Grid
            </td>
        </tr>
        <tr style="height:50px;">
            <td style="width: 50%">
                <b>Ctrl + UpArrow</b>
            </td>
            <td style="width: 50%">
                Collapse All
            </td>
        </tr>
        <tr style="height:50px;">
            <td style="width: 50%">
                <b>Ctrl + DownArrow</b>
            </td>
            <td style="width: 50%">
                Expand All
            </td>
        </tr>
        <tr style="height:50px;">
            <td style="width: 50%">
                <b>Up Arrow</b>
            </td>
            <td style="width: 50%">
                Move row selection up
            </td>
        </tr>
        <tr style="height:50px;">
            <td style="width: 50%">
                <b>Down Arrow</b>
            </td>
            <td style="width: 50%">
                Move row selection down
            </td>
        </tr>
        <tr style="height:50px;">
            <td style="width: 50%">
                <b>Right Arrow</b>
            </td>
            <td style="width: 50%">
                Move Cell selection right
            </td>
        </tr>
        <tr style="height:50px;">
            <td style="width: 50%">
                <b>Left Arrow</b>
            </td>
            <td style="width: 50%">
                Move Cell selection left
            </td>
        </tr>
        <tr style="height:50px;">
            <td style="width: 50%">
                <b>Shift + Down/Up</b>
            </td>
            <td style="width: 50%">
                Multiple row Selection
            </td>
        </tr>
    </table>
</div>

@code {
    public List<SelfReferenceData> TreeData { get; set; }

    protected override void OnInitialized()
    {
        this.TreeData = SelfReferenceData.GetTree().ToList();
    }
}
